<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="mask-inset-circle">inset-circle</div>
    <div class="mask-bg"></div>
    <div class="g-outer">
        <div class="g-inner"></div>
    </div>
    <div class="mask-rotate"></div>
</body>
<style>
    /* 
    这段代码创建了一个具有特定尺寸、背景和遮罩效果的元素。遮罩效果在元素的四个角创建了从透明到特定颜色的过渡。

    radial-gradient(                     第一个径向渐变遮罩 
        circle at 100% 100%,             圆形，中心在右下角 
        transparent 0,                   从中心开始 0 像素内为透明 
        transparent 12px,#2179f5 13px    12 像素内为透明，13 像素开始为 #2179f5 
    ),
    */
    .mask-inset-circle {
        width: 160px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: linear-gradient(45deg, #2179f5, #e91e63);
        mask: radial-gradient(
                circle at 100% 100%,
                transparent 0,
                transparent 12px,#2179f5 13px
            ),radial-gradient(
                circle at 0 0,
                transparent 0,
                transparent 12px,#2179f5 13px
            ),radial-gradient(
                circle at 100% 0,
                transparent 0,
                transparent 12px,#2179f5 13px
            ),radial-gradient(
                circle at 0 100%,
                transparent 0,
                transparent 12px,#2179f5 13px
            );
        mask-repeat: no-repeat;
        mask-position: right bottom, left top, right top, left bottom;
        mask-size: 50% 50%;
    }


    /* 
    遮罩完成两张图片重合 
    
    */

    .mask-bg{
        margin: auto;
        position: relative;
        width: 25vw;
        height: 25vw;
        background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202408/6aa5ba70214fb643c81e2c3f37ae9092.png) no-repeat;
        background-size: cover;

        &::before {
            position: absolute;
            content: "";
            top: 0;left: 0; right: 0;bottom: 0;
            background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202405/7f06f927955454505f7c953a24cf2665.png) no-repeat;
            background-size: cover;
            /*  mask: linear-gradient(45deg, #000 50%, transparent 50%); 调整值 来调整分界线 */
            mask: linear-gradient(45deg, #000 40%, transparent 60%);
            z-index: 1;
        }
    }

    /* 
    使用遮罩完成小美banner的动画  **动态改变 mask 属性范围、大小等值**
    */
    .g-outer {
        margin: auto;
        width: 376px;
        height: 144px;
        background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/static/mine/banner1_cn.png) center no-repeat;
        background-size: contain;
    }
    .g-inner {
        width: 376px;
        height: 144px;
        background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/static/mine/banner2_cn.png) center no-repeat;
        background-size: contain;
        mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
        mask-size: 200% 100%;
        animation: maskChange 2s infinite alternate linear;
    }
    @keyframes maskChange {
        0% {
            mask-position: -100% 0;
        }
        100% {
            mask-position: 0 0;
        }
    }


    /* 
    旋转动画实现
    实现了一个带有动画遮罩效果的元素。通过自定义属性 --per 的变化来控制遮罩的范围，并通过动画使其在一定时间内从初始的 -10% 逐渐扩展到 100% 。
    */
    @property --per {
        syntax: '<percentage>';
        inherits: false;
        initial-value: -10%;
    }
    .mask-rotate {
        position: relative;
        width: 400px;
        height: 400px;
        background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202408/6aa5ba70214fb643c81e2c3f37ae9092.png) no-repeat;
        background-size: contain;
        &::before {
            content: "";
            position: absolute;
            top: 0;left: 0; right: 0;bottom: 0;
            background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com//img/uploads/api/202405/7f06f927955454505f7c953a24cf2665.png) no-repeat;
            background-size: contain;
            mask: conic-gradient(  /* 定义锥形渐变遮罩 */
                #000 0,  /* 从 0 度开始为黑色 */
                #000 var(--per),  /* 到自定义属性 --per 位置为黑色 */
                transparent calc(var(--per) + 10%),    /* 从自定义属性 --per 位置 + 10% 开始为透明 */
                transparent
            );
            z-index: 1;
            animation: maskRotate 1.2s ease-in infinite ;
        }
    }
    @keyframes maskRotate {
        0% {
            --per: -10%;
        }
        100% {
            --per: 100%;
        }
    }

</style>
</html>